<template>
  <div class="app-container page-form">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>{{ router?.meta?.title }}</span>
        </div>
      </template>
      <div>
        <el-form
          v-loading="loading"
          label-position="top"
          :model="form"
          :rules="rules"
          :ref="setFormRef"
        >
          <template v-for="item in fields" :key="item.name">
            <el-form-item
              v-if="item.type === 'user'"
              :label="item.title"
              prop="user"
            >
              <el-select
                v-model="user.vl"
                style="width: 100%"
                :placeholder="`请选择${item.title}`"
                clearable
                @change="searchSelected"
              >
                <el-option
                  v-for="item in restaurants || []"
                  :value="item.value"
                  :label="item.value"
                  :key="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item
              v-if="item.type === 'select'"
              :label="item.title"
              :prop="item.name"
            >
              <el-select
                v-model="form[item.name]"
                style="width: 100%"
                :placeholder="`请选择${item.title}`"
                clearable
              >
                <el-option
                  v-for="item in item.options || []"
                  :value="item"
                  :label="item"
                  :key="item"
                />
              </el-select>
            </el-form-item>

            <el-form-item
              v-if="item.type === 'string'"
              :label="item.title"
              :prop="item.name"
            >
              <el-input
                v-model="form[item.name]"
                :placeholder="`请填写${item.title}`"
                autocomplete="on"
              />
            </el-form-item>

            <el-form-item
              v-if="item.type === 'file' || item.type === 'directory'"
              :label="item.title"
              :prop="item.name"
            >
              <el-input
                v-model="form[item.name]"
                :placeholder="`请选择${item.title}`"
                readonly
                autocomplete="on"
              >
                <template #append>
                  <el-button
                    type="primary"
                    icon="el-icon-folder-opened"
                    @click="handleFileSystem(item)"
                  />
                </template>
              </el-input>
            </el-form-item>
          </template>
          <el-form-item label="预定执行时间">
            <el-date-picker
              v-model="execute_time"
              type="datetime"
              placeholder="请选择预定执行时间"
              style="width: 100%"
            />
          </el-form-item>
          <div class="form-footer">
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </div>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useRoute } from 'vue-router'
import useForm from '@/utils/useForm'
import useFileSystem from '@/utils/useFileSystem'
import { FlowPostItem } from '@/api/flow'

export default defineComponent({
  name: 'Form',
  emits: ['onClose'],
  setup() {
    const router = useRoute()
    const formobj = useForm(router)
    const fs = useFileSystem()

    return {
      ...formobj,
      router,
      handleFileSystem: async (item: FlowPostItem) => {
        try {
          const fieldtemp = item.name
          const result = await fs.open(item.type)
          if (result.value && result.value.length > 0) {
            formobj.form.value[fieldtemp] = result.value[0]
          }
        } catch (err) {
          console.log(err)
        }
      },
      submit: () => {
        const name: string = router.name as string
        formobj.handleSubmit(name)
      }
    }
  }
})
</script>

<style lang="scss" scoped>
.page-form {
  height: 100%;
  overflow: hidden;

  .box-card {
    height: 100%;
  }
  .form-footer {
    text-align: right;
    padding-top: 10px;
  }
  ::v-deep .el-card {
    height: 100%;
  }
  ::v-deep .el-card__body {
    height: calc(100% - 56px);
    box-sizing: border-box;
    overflow: auto;
  }
}
</style>
